<template>
  <div class="exercise-overview">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="exercise-info">
          <div class="info-section">
            <h3 class="section-title">练习集信息</h3>
            <div class="info-content">
              <div class="info-item">
                <span class="label">描述：</span>
                <span class="value">{{ exerciseSet.description || '无描述' }}</span>
              </div>
              <div class="info-item">
                <span class="label">类别：</span>
                <el-tag size="small" type="info">{{ exerciseSet.category || '未分类' }}</el-tag>
              </div>
              <div class="info-item">
                <span class="label">难度：</span>
                <el-rate
                  v-model="exerciseSet.difficulty"
                  disabled
                  text-color="#ff9900"
                  :max="3"
                  :colors="difficultyColors"
                />
              </div>
              <div class="info-item">
                <span class="label">题目数量：</span>
                <span class="value">{{ exercises.length }}</span>
              </div>
              <div class="info-item">
                <span class="label">创建时间：</span>
                <span class="value">{{ formatDate(exerciseSet.created_at) }}</span>
              </div>
              <div class="info-item">
                <span class="label">标签：</span>
                <div class="tags-container">
                  <el-tag
                    v-for="tag in exerciseSet.tags"
                    :key="tag"
                    size="small"
                    class="tag-item"
                  >
                    {{ tag }}
                  </el-tag>
                  <span v-if="!exerciseSet.tags || exerciseSet.tags.length === 0" class="no-tags">无标签</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="8">
        <div class="progress-section">
          <h3 class="section-title">练习进度</h3>
          <div class="progress-content" v-if="progress">
            <el-progress
              type="circle"
              :percentage="calculateCompletionPercentage()"
              :status="progress.is_completed ? 'success' : ''"
              :stroke-width="10"
            />
            
            <div class="progress-stats">
              <div class="stat-item">
                <span class="label">完成状态：</span>
                <el-tag :type="progress.is_completed ? 'success' : 'warning'" size="small">
                  {{ progress.is_completed ? '已完成' : '进行中' }}
                </el-tag>
              </div>
              <div class="stat-item">
                <span class="label">最高分数：</span>
                <span class="value highlight">{{ progress.highest_score || 0 }}%</span>
              </div>
              <div class="stat-item">
                <span class="label">最近得分：</span>
                <span class="value">{{ progress.last_score || 0 }}%</span>
              </div>
              <div class="stat-item">
                <span class="label">尝试次数：</span>
                <span class="value">{{ progress.attempts || 0 }}</span>
              </div>
              <div class="stat-item">
                <span class="label">最近尝试：</span>
                <span class="value">{{ formatDate(progress.last_attempt_date) }}</span>
              </div>
            </div>
            
            <div class="progress-actions">
              <el-button type="warning" size="small" @click="confirmResetProgress" :disabled="!progress.attempts">
                重置进度
              </el-button>
            </div>
          </div>
          
          <div class="no-progress" v-else>
            <el-empty description="暂无练习记录" :image-size="100">
              <template #description>
                <p>您还没有开始练习，点击"开始练习"按钮开始吧！</p>
              </template>
            </el-empty>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ElMessageBox } from 'element-plus'

export default {
  name: 'ExerciseOverview',
  props: {
    exerciseSet: {
      type: Object,
      required: true
    },
    exercises: {
      type: Array,
      default: () => []
    },
    progress: {
      type: Object,
      default: null
    }
  },
  emits: ['reset-progress'],
  setup(props, { emit }) {
    const difficultyColors = ['#99A9BF', '#F7BA2A', '#FF9900']
    
    const formatDate = (dateString) => {
      if (!dateString) return '未知'
      const date = new Date(dateString)
      return date.toLocaleString()
    }
    
    const calculateCompletionPercentage = () => {
      if (!props.progress) return 0
      if (!props.exercises.length) return 0
      
      const completedCount = props.progress.completed_questions || 0
      return Math.round((completedCount / props.exercises.length) * 100)
    }
    
    const confirmResetProgress = () => {
      ElMessageBox.confirm(
        '确定要重置练习进度吗？这将清除所有的练习记录和得分。',
        '重置进度',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          emit('reset-progress')
        })
        .catch(() => {
          // 用户取消操作
        })
    }
    
    return {
      difficultyColors,
      formatDate,
      calculateCompletionPercentage,
      confirmResetProgress
    }
  }
}
</script>

<style scoped>
.exercise-overview {
  margin-bottom: 20px;
}

.info-section, .progress-section {
  background-color: var(--el-bg-color-page);
  border-radius: 4px;
  padding: 16px;
  height: 100%;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--el-text-color-primary);
  border-bottom: 1px solid var(--el-border-color-light);
  padding-bottom: 8px;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: flex-start;
}

.label {
  font-weight: 500;
  color: var(--el-text-color-secondary);
  width: 80px;
  flex-shrink: 0;
}

.value {
  color: var(--el-text-color-primary);
}

.highlight {
  color: var(--el-color-primary);
  font-weight: 600;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  margin-right: 0;
}

.no-tags {
  color: var(--el-text-color-secondary);
  font-style: italic;
}

.progress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.progress-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.progress-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.no-progress {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
</style> 